<template>
<div class="device-info">
  <ul>
<!--     {{deiveInfo}}-->
    <li><label>设备编码：</label><span>{{_.get(deiveInfo,'code')||'-'}}</span></li>
    <li><label>设备型号：</label><span>{{_.get(deiveInfo,'deviceModelCode')||'-'}}</span></li>
    <li><label>设备状态：</label>
    <span>
      <span class="status" :style="{background:_.get(status,'color')}">{{_.get(status,'name')}}</span>
    </span>
    </li>
    <li><label>维护员：</label><span>{{_.get(deiveInfo,'installUserName')||'-'}}</span></li>
    <li><label>联系电话：</label><span>{{_.get(deiveInfo,'installUserPhone')||'-'}}</span></li>
    <li><label>当前道路：</label><span>{{_.get(deiveInfo,'address')||'-'}}</span></li>
    <li><label>所属单位：</label><span>{{_.get(deiveInfo,'orgName')||'-'}}</span></li>
    <li><label>最后上线：</label><span>{{_.get(deiveInfo,'dataUpdatedAt')||'-'}}</span></li>
  </ul>
</div>
</template>

<script>
import _ from 'lodash'
export default {
  name: "mapDevice",
  computed:{
    _:function (){
      return _
    },
    status:function (){
      return this.deviceStatus.find(o=>o.value==this.deiveInfo.deviceStatus)||this.deviceStatus[0];
    }
  },
  data(){
    return {
      deviceStatus:[
        {value:1,color:'#008aff',name:'正常'},
        {value:2,color:'#ff0000',name:'告警'},
        {value:3,color:'#fae600',name:'故障'},
        {value:4,color:'#f09614',name:'离线'},
      ],
    }
  },
  props:{
    deiveInfo:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  }
}
</script>

<style scoped lang="less">
@import '../../styles/setting';
.status{
  color: #fff;
  padding: 2px 3px;
  border-radius: 3px;
}
.device-info{
  background: #fff;
  overflow: hidden;
  border: 1px solid #eee;
  padding: 20px;
  min-width: 300px;
  ul{
    padding: 0;
    li{
      margin-top: 10px;
      label:#fff
    }
  }
}
.status{
  background:#008aff;
  padding:2px 5px;
  border-radius: 2px;
  color: #fff;
  &.offlineStatus{
    background: @S03_001;
  }
  &.faultStatus{
    background: red;
  }
  &.abnormalStatus{
    background: @S03_002;
  }
}
</style>
